/*
  学习目标：受控组件的基本使用
  本质: 表单元素的值, 由state控制
  使用场景💥:  与 v-model类似
    1. 收集用户输入的内容
    2. 回填表单数据
*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    msg: 'hello 79',
  };

  render() {
    return (
      <div>
        <input
          //  💥2. onChange事件配合setState, 修改state的值
          onChange={(e) => {
            console.log('e.target.value  ----->  ', e.target.value);
            this.setState({ msg: e.target.value });
          }}
          type="text"
          // 💥 1. 表单元素的value或checked属性, 受state的控制
          value={this.state.msg}
          // 🔔 使用onChange替代onInput
          // onInput={(e) => {
          //   console.log('e.target.value  ----->  ', e.target.value);
          //   this.setState({ msg: e.target.value });
          // }}

          //🔔 onBlur成为了失去焦点事件
          onBlur={(e) => {
            console.log('e.target.value  ----->  ', e.target.value);
          }}
        />
      </div>
    );
  }
}
